<template>
    <div class="sidebar">
        <h1 class="winfyho">数据可视化</h1>

        <sideBarItem v-for="(item,index) in routes"
                     :key="index"
                     :item="item"
                     :current="current"
                     @change="handleChange" />
    </div>
</template>

<script>
import sideBarItem from "./sidebarItem.vue";
export default {
    name: "sidebar",
    components: {
        sideBarItem
    },
    props: {},
    data () {
        return {
            routes: [
                // { title: "案例", path: "/demo" },
                { title: "主界面", path: "/index" },
                { title: "数据集", path: "/bigdata" },
                { title: "分析图", path: "/analy" },
            ],
            current: "/bigdata"
        };
    },
    computed: {},
    methods: {
        handleChange (item) {
            this.current = item.path;
        }
    },
    created () {

        this.current = this.$router.history.current.path;
        if (this.current == '/') {
            this.current = "/bigdata"
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.sidebar {
    flex: 0 0 auto;
    width: 200px;
    height: 100vh;
    background: #293c55;
    color: #fff;

    .winfyho {
        text-align: center;
        font-weight: bold;
    }
}
</style>
